<template>

  <view class="container">
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="cu-bar search bg-white">
        <view class="search-form round">
          <text class="cuIcon-search"></text>
          <input type="text" placeholder="搜索城市" confirm-type="search" v-model="searchText" @input="onSearch" />
        </view>
      </view>
    </view>

    <!-- 当前定位城市 -->
    <view class="current-city">
      <view class="title">当前定位城市</view>
      <view class="city-item" @tap="selectCity(currentCityName)">
        <text class="cuIcon-location text-blue"></text>
        <text class="city-name">{{ currentCityName || '正在定位...' }}</text>
      </view>
    </view>

    <!-- 全部 -->
    <view class="all-section">
      <view class="title">全部</view>
      <view class="cities-grid">
        <view class="city-grid-item" @tap="selectCity('全国')">
          全国
        </view>
      </view>
    </view>

    <!-- 历史选择 -->
    <!-- <view class="history-section">
      <view class="title">历史选择</view>
      <view class="history-cities">
        <view class="cu-btn bg-blue text-white round" @tap="selectCity('安庆市')">
          安庆市
        </view>
      </view>
    </view> -->

    <!-- 已开通城市 -->
    <view class="opened-cities">
      <view class="title">已开通城市</view>
      <view class="cities-grid">
        <view class="city-grid-item" v-for="city in filteredCities" :key="city" @tap="selectCity(city)">
          {{ city }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/common/request.js';
import { mapGetters, mapActions, mapState } from 'vuex';
export default {
  data() {
    return {
      StatusBar: 0,
      CustomBar: 0,
      searchText: '',
      cities: []
    }
  },
  computed: {
    ...mapState({
      userLocation: state => state.location || {},
    }),
    currentCityName() {
      return this.userLocation.city;
    },
    filteredCities() {
      if (!this.searchText) {
        return this.cities
      }
      return this.cities.filter(city => city.includes(this.searchText))
    }
  },
  onLoad() {
    this.getSystemInfo();
    this.getCityList();
  },
  methods: {
    getCityList() {
      let opts = {
        url: '/api/index/getCityList',
        method: 'get'
      };
      uni.showLoading({
        title: '加载中'
      });
      request.httpRequest(opts).then(res => {
        uni.hideLoading();
        console.log(res.data.data, 'getCityList');
        this.cities = res.data.data || []
      });
    },
    goBack() {
      uni.navigateBack()
    },
    selectCity(city) {
      if (!city || city === '定位中...') return;
      // 返回选中的城市
      uni.$emit('citySelected', city == '全国' ? '' : city);
      uni.navigateBack()
    },
    onSearch() {
      // 搜索逻辑已通过computed实现
    },
    getSystemInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.StatusBar = res.statusBarHeight
          this.CustomBar = res.statusBarHeight + 45
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30rpx;
  background-color: #fff;
  min-height: 100vh;
}

.search-box {
  background: white;
  // margin: 20rpx -30rpx;
  padding: 0 30rpx;
}

.current-city,
.all-section,
.history-section,
.opened-cities {
  margin-top: 40rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
}

.opened-cities {
  padding-bottom: 120rpx;
}

.city-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  .cuIcon-location {
    margin-right: 15rpx;
    font-size: 32rpx;
  }

  .city-name {
    font-size: 30rpx;
    color: #333;
  }
}

.history-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.cities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  // padding-bottom: 120rpx;

  .city-grid-item {
    background-color: #ccc;
    padding: 30rpx 20rpx;
    text-align: center;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #333;

    &:active {
      background-color: #f1f1f1;
    }
  }
}
</style>
